<%--
  Created by IntelliJ IDEA.
  User: zhao
  Date: 17-1-31
  Time: 上午10:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style>
        body,div,ul{margin:0px;padding:0px;}
        #container{
            width:1200px;
            margin:0 auto;
        }
        #Header{
            margin-bottom: 0px;
        }
        #Carousel{
            margin-top: 0px;
        }
        #Content{
            margin-top:20px;
        }
        #Footer{
            margin-top: 20px;
            background: yellow;
        }
        .clear{
            clear: both;
        }
        #tzgg{
            width:40%;
        }
        #jcxy{

        }

        li{
            　　display:block;overflow:hidden;word-break:keep-all;white-space:nowrap;text-overflow:ellipsis;
        }

    </style>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript" src="/resource/js/main.js"></script>
    <script type="text/javascript" src="/resource/js/common.js"></script>

    <script type="text/javascript" >
        var pageAmount;
        var pageNumber = 0;
        var pageSize = 20;
        var total;
        function addXiaoYou(data) {
            for (var i=0;i<data.length;i++){
                var news = data[i];
                if ((i%5)==0){
                    var $row = $("<div class='row'></div>");
                    $("#xiaoyouDiv").append($row)
                }
                var $lastRow = $("#xiaoyouDiv .row").last();
                var $xy = $("<div class='col-sm-6 col-md-4'  style='width: 20%;height: 360px;'>"+
                "<div class='thumbnail' style='padding-top: 15px'>"+
                    "<img src='"+news.thumbnailPath+"' alt='"+news.title+"' style='width: 120px;height: 160px' >"+
                    "<div class='caption'>"+
                    "<h3 style='text-align: center;margin-top: 10px'>"+news.title+"</h3>"+
                    "<p style='text-indent:2em;height:60px;overflow: hidden;font-size: small;margin-top: 10px;margin-bottom: 10px'>"+news.intrduce+"</p>"+
                "<p style='text-align: center;margin-bottom: 0px'><a href='/news/read.do?id="+news.id+"' class='btn btn-default' style='width: 100%' role='button'>校友履历</a></p>"+
                    "</div></div></div>");
                $lastRow.append($xy);
            }
        }
        function nextPage() {
            console.log(pageNumber);
            pageNumber++;
            if (pageAmount<=pageNumber){
                $("#pageNext").hide();
            }else {
                $("#pageNext").show();
            }
            $("#xiaoyouDiv").empty();
            $.ajax("/news/getNewsJsonData.do?moduleId=${module.id}&pageNumber="+pageNumber+"&pageSize="+pageSize,{
                success:function (json) {
                    var data = json.data;
                    addXiaoYou(data);
                }
            })
        }
        function prevPage(){
            console.log(pageNumber);
            pageNumber--;
            if (0>=pageNumber){
                $("#pagePrev").hide();
            }else {
                $("#pagePrev").show();
            }
            $("#xiaoyouDiv").empty();
            $.ajax("/news/getNewsJsonData.do?moduleId=${module.id}&pageNumber="+pageNumber+"&pageSize="+pageSize,{
                success:function (json) {
                    var data = json.data;
                    addXiaoYou(data)
                }
            })
        }
        $(function () {
            //初始化导航栏
            initNav();
            $('#pagePrev').hide();
            $.ajax("/news/getNewsJsonData.do?moduleId=${module.id}&pageNumber="+pageNumber+"&pageSize="+pageSize,{
                success:function (json) {
                    var data = json.data;
                    total = json.total;
                    pageAmount=((total-1)/(pageSize+1));
                    addXiaoYou(data)

                }
            })

        });
    </script>
</head>
<body style="background-image:url('${pageContext.request.contextPath}/resource/img/bgimg.jpg')">
<div id="container">
    <jsp:include page="Head.jsp" />

    <div style="text-align:center;clear:both">

    </div>
    <div id="Content" class="row">

        <div id="content-main" style="float: left;width: 100%">

            <!--杰出校友模块-->
            <div id="jcxy" style="float: left;width: 100%;padding-left: 10px">

                <div class="panel panel-primary">
                    <div class="panel-heading" style="text-align: center">
                        <!--标题-->
                        <h4 class="panel-title" style="display: inline">${module.name}</h4>
                    </div>
                    <div id="xiaoyouDiv" class="panel-body">
                        <!--内容-->
                    </div>
                </div>

            </div>
        </div>
        <div>
            <nav aria-label="...">
                <ul class="pager">
                    <li id="pagePrev" onclick="prevPage()" style="float: left;padding-left: 30px"><a href="#">Previous</a></li>
                    <li id="pageNext" onclick="nextPage()" style="float: right;padding-right: 30px"><a href="javascript:void (0)">Next</a></li>
                </ul>
            </nav>
        </div>


    </div>
</div>
<div id="Footer">
    <jsp:include page="footer.jsp"/>
</div>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
